<template>
    <div>
        <ListPage>
            <template #filter>
                <el-form ref="form" :model="searchForm" inline label-width="80px">
                    <el-form-item label="">
                        <el-input v-model="searchForm.name" placeholder="菜单名称" clearable style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="submitSearchForm">
                            搜索
                        </el-button>
                        <el-button size="small" @click="resetSearchForm">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </template>

            <template #operate>
                <el-button type="success" size="small" @click="addDir">
                    新增目录
                </el-button>
            </template>

            <template #table>
                <el-table :data="tableData" v-loading="loading" style="width: 100%" size="medium" row-key="id" :tree-props="{ children: 'children' }">
                    <el-table-column prop="label" label="菜单名"></el-table-column>
                    <el-table-column  prop="flag" :show-overflow-tooltip="true" label="标识符">
                        <template v-slot="scope">
                            <el-tag type="info">{{ scope.row.flag ? scope.row.flag : "暂定" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column width="150" prop="type" label="类型">
                        <template v-slot="scope">
                            <el-tag v-if="scope.row.type == 0">目录</el-tag>
                            <el-tag v-else-if="scope.row.type == 1" type="success">菜单</el-tag>
                            <el-tag v-else type="warning">按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="icon" label="图标">
                        <template v-slot="scope">
                            <i :class="scope.row.icon"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="info" :show-overflow-tooltip="true" label="描述">
                        <template v-slot="scope">
                            <el-tag type="info">{{ scope.row.info ? scope.row.info : "无" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="component" :show-overflow-tooltip="true" label="组件路径">
                        <template v-slot="scope">
                            <el-tag type="info">{{ scope.row.component ? scope.row.component : "暂定" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.state == 0">正常</el-tag>
                            <el-tag type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="210" fixed="right">
                        <template v-slot="scope">
                            <el-button size="small" type="success" @click="addBtn(scope.row)">
                                新增</el-button>
                            <el-button size="small" type="warning" @click="editBtn(scope.row)">
                                编辑</el-button>
                            <el-button size="small" type="danger" @click="delBtn(scope.row.id)">
                                删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #pagination>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="searchForm.currentPage" :page-sizes="[20, 30, 50]"
                    :page-size="searchForm.pageSize" layout="total,sizes, prev, pager, next,jumper"
                    :total="searchForm.total">
                </el-pagination>
            </template>
        </ListPage>

        <el-dialog :title="formTitle" :visible.sync="formVisable" width="30%" @close="close">
            <el-form :model="menuForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="上级菜单：">
                    <el-input disabled v-model="menuForm.parentLabel" placeholder="请输入上级菜单"></el-input>
                </el-form-item>
                <el-form-item label="菜单名称：">
                    <el-input v-model="menuForm.label" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型：">
                    <el-radio-group v-model="menuForm.type" size="small">
                        <el-radio-button label="0">目录</el-radio-button>
                        <el-radio-button label="1">菜单</el-radio-button>
                        <el-radio-button label="2">按钮</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="权限标识：">
                    <el-input v-model="menuForm.flag" placeholder="请输入权限标识"></el-input>
                </el-form-item>
                <el-form-item label="菜单状态：">
                    <el-radio type="radio" v-model="menuForm.state" label="0">开启</el-radio>
                    <el-radio type="radio" v-model="menuForm.state" label="-1">关闭</el-radio>
                </el-form-item>
                
                <el-form-item>
                    <el-button size="small" type="primary" @click="addMenuSubmit">提交</el-button>
                    <el-button size="small" @click="close">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { 
    queryPageByQo,
    addMenu,
    deleteMenu,
    editMenu
} from "@/api/system/menu/menuApi";
import { popup } from "@/assets/js/common";
import {
    checkPermissons,
} from "@/api/system/role/roleApi";

export default {
    data() {
        return {
            loading: false,
            /*搜索*/
            /*表格*/
            tableData: [],
            searchForm: {
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            menuList: [],
            formVisable: false,
            formTitle: '',
            menuForm: {
                parentLabel: '',
                label: '',
                purl: '',
                type: '0',
                state: '0',
                parentId: null,
                flag: ''
            }
        };
    },
    methods: {
        init() {
            this.loading = true;
            queryPageByQo(this.searchForm).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.searchForm.total = res.data.total;
                    this.searchForm.pageSize = res.data.size;
                    this.searchForm.currentPage = res.data.current;
                } else {
                    popup(res.msg, "error");
                }
            })
            .finally(() => {
                this.loading = false;
            });
        },

        submitSearchForm() {
            this.init();
        },

        resetSearchForm() {
            this.searchForm.name = "";
        },

        /*分页*/
        handleSizeChange(val) {
            this.searchForm.pageSize = val;editBtn
            this.init();
        },

        handleCurrentChange(val) {
            this.searchForm.currentPage = val;
            this.init();
        },

        addBtn(row) {
            this.formTitle = '新增菜单'
            this.menuForm.parentId = row.id
            this.menuForm.parentLabel = row.label
            
            this.formVisable = true
        },

        editBtn(row) {
            this.formTitle = '编辑菜单'
            this.menuForm = {...row}
            if(row.parentId === null) {
                this.menuForm.parentLabel = '主类目'
            }

            this.formVisable = true
        },

        addDir() {
            this.formTitle = '新增目录'
            this.menuForm.parentId = 0
            this.menuForm.parentLabel = '主类目'
            this.formVisable = true
        },

        addMenuSubmit() {
            // 编辑
            if(this.menuForm.id) {
                editMenu(this.menuForm).then(res => {
                    this.init()
                    this.formVisable = false
                })
            } else {
                addMenu(this.menuForm).then(res => {
                    this.init()
                    this.formVisable = false
                })
            }
            
        },

        delBtn(id) {
            this.$confirm('确定删除当前菜单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMenu(id).then(() => {
                    this.init()
                })
            })
        },

        close() {
            this.formVisable = false
        },

        getMenuList() {
            // checkPermissons()
        }
    },
    mounted() {
        this.init();
        // this.getMenuList()
    },
};
</script>
<style>
.searchForm {
    height: 134px;
}

.table {
    height: 320px;
}

.pageUtils {
    position: absolute;
    width: 84%;
    margin: 2px auto;
    height: 43px;
}
.searchForm {
    display: inline-block;
    margin: 0 auto;
    height: 51px;
    line-height: 51px;
}

.searchForm .column {
    display: inline-block;
    margin: 0 auto;
    margin-right: 2px;
    line-height: 48px;
    height: 51px;
}
</style>